import axios from 'axios';
import React, {Component} from 'react';
import {Link} from 'react-router-dom'
import {Form, Icon, Input, Button, Checkbox, message} from 'antd';
const FormItem = Form.Item;
import './App.css';
import './Login.css';


class NormalLoginForm extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);

                let formData = new URLSearchParams();
                for (let key in values) {
                    formData.append(key, values[key]);
                }
                axios.post("/api/login", formData).then((response => {
                    console.log(response);
                    if (response.data.success) {
                        message.success("登录成功");
                        return
                    }
                    message.error(response.data.msg);

                })).catch(() => {
                    message.warn("网络异常")
                });
            }
        });
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <FormItem>
                    {getFieldDecorator('username', {
                        rules: [{required: true, message: 'Please input your username!'}],
                    })(
                        <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="Username"/>
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{required: true, message: 'Please input your Password!'}],
                    })(
                        <Input prefix={<Icon type="lock" style={{fontSize: 13}}/>} type="password"
                               placeholder="Password"/>
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                    })(
                        <Checkbox className="login-form-remember-me">Remember me</Checkbox>
                    )}
                    <a className="login-form-forgot" href="">Forgot password</a>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        Log in
                    </Button>
                    Or <Link to="/sign-up">register now!</Link>
                </FormItem>
            </Form>
        );
    }
}

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);

class Login extends Component {
    render() {
        return (
            <div className="App">
                <div className="App-header">
                    <img src="./logo.png" className="App-logo" alt="logo"/>
                    <h1 className="App-title">Welcome to Login</h1>
                </div>
                <div className="box-center" id="components-form-demo-normal-login">
                    <WrappedNormalLoginForm/>
                </div>
            </div>
        );
    }
}

export default Login;

